import React, { useState, useEffect } from "react";
import "./index.css";
import { LeftOutlined, RightOutlined } from "@ant-design/icons";
import oneSlider from "../secondDemo/img/01.jpg";
import twoSlider from "../secondDemo/img/02.png";
import threeSlider from "../secondDemo/img/03.jpg";
import fourSlider from "../secondDemo/img/04.png";
import fifSlider from "../secondDemo/img/05.jpg";
import sixSlider from "../secondDemo/img/06.jpg";
import sevenSlider from "../secondDemo/img/07.jpg";
import eightSlider from "../secondDemo/img/08.jpg";

const images = [
  oneSlider,
  twoSlider,
  threeSlider,
  fourSlider,
  fifSlider,
  sixSlider,
  sevenSlider,
  eightSlider,
];

const SecondSlider = () => {
  const [currentIndex, setCurrentIndex] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
    }, 3000); // 自动轮播时间间隔为3000毫秒（3秒）

    return () => clearInterval(timer);
  }, []);

  const handlePrevClick = (e) => {
    e.preventDefault();
    setCurrentIndex(
      (prevIndex) => (prevIndex - 1 + images.length) % images.length
    );
  };

  const handleNextClick = (e) => {
    e.preventDefault();
    setCurrentIndex((prevIndex) => (prevIndex + 1) % images.length);
  };

  const swiperItems = images.map((image, index) => (
    <div
      key={index}
      className={`swiper-item ${index === currentIndex ? "active" : ""}`}
      style={{
        transform: `translateX(${(index - currentIndex) * 1400}px)`,
        zIndex: images.length - index, // 根据索引设置z-index
      }}
    >
      <img className="img" src={image} alt="" />
    </div>
  ));

  const points = images.map((_, index) => (
    <div
      key={index}
      className={`point ${index === currentIndex ? "active" : ""}`}
      onClick={(e) => {
        e.preventDefault();
        setCurrentIndex(index);
      }}
    >
      &#9679;
    </div>
  ));

  return (
    <div id="swiper">
      <div className="swiper">{swiperItems}</div>
      <span className="btn prev" onClick={handlePrevClick}>
        <RightOutlined />
      </span>
      <span className="btn next" onClick={handleNextClick}>
        <LeftOutlined />
      </span>
      <div className="points">{points}</div>
    </div>
  );
};

export default SecondSlider;
